@use '../../../styles/variables' as *;
@use './axiom-base-sheet';

.axiom-number-range-sheet {
  @extend .axiom-base-sheet;

  .content {
    @extend .axiom-base-sheet__content;
  }

  // 数值输入区域
  .range-inputs {
    .range-input-item {
      .input-label {
        @extend .axiom-base-sheet__sub-label;
      }
      
      .number-input {
        width: 100%;
        
        :deep(.el-input) {
          .el-input__inner {
            border-radius: var(--axiom-border-radius-base, 8px);
            border: 1px solid var(--border-color);
            background: var(--bg-color);
            color: var(--text-color);
            font-size: var(--axiom-font-size-md, 16px);
            text-align: center;
            transition: all var(--axiom-transition-duration-base) ease;
            
            &:focus {
              border-color: var(--primary-color);
              box-shadow: var(--axiom-focus-ring-shadow);
            }
          }
          
          .el-input__prefix,
          .el-input__suffix {
            color: var(--text-color-light);
          }
        }
        
        :deep(.el-input-number) {
          width: 100%;
          
          .el-input__inner {
            text-align: center;
          }
          
          .el-input-number__decrease,
          .el-input-number__increase {
            background: var(--bg-color-tertiary);
            border-color: var(--border-color);
            color: var(--text-color);
            
            &:hover {
              background: var(--primary-color);
              border-color: var(--primary-color);
              color: var(--text-color-on-primary);
            }
          }
        }
      }
    }
    
    .range-separator {
      margin: auto 8px;
      text-align: center;
      color: var(--text-color-light);
    }
  }

  // 滑块区域
  .slider-section {
    padding: var(--axiom-spacing-lg, 20px) 0;
    margin-bottom: var(--axiom-spacing-lg, 20px);
    
    .slider-label {
      margin-bottom: var(--axiom-spacing-md, 16px);
      font-size: var(--axiom-font-size-sm, 14px);
      color: var(--text-color);
      font-weight: var(--axiom-font-weight-medium, 500);
      text-align: center;
    }
    
    .range-slider {
      padding: 0 var(--axiom-spacing-lg, 20px);
      
      :deep(.el-slider) {
        .el-slider__runway {
          background: var(--bg-color-tertiary);
          border: 1px solid var(--border-color);
        }
        
        .el-slider__bar {
          background: var(--primary-color);
        }
        
        .el-slider__button {
          border: 2px solid var(--primary-color);
          background: var(--bg-color-absolute-white, #fff);
          width: var(--axiom-slider-button-size, 20px);
          height: var(--axiom-slider-button-size, 20px);
          
          &:hover {
            box-shadow: var(--axiom-slider-button-hover-shadow);
          }
        }
        
        .el-slider__button-wrapper {
          &.hover {
            cursor: grab;
          }
          
          &.dragging {
            cursor: grabbing;
          }
        }
      }
    }
    
    .slider-labels {
      display: flex;
      justify-content: space-between;
      margin-top: var(--axiom-spacing-xs, 8px);
      padding: 0 var(--axiom-spacing-lg, 20px);
      
      .label-item {
        font-size: var(--axiom-font-size-xs, 12px);
        color: var(--text-color-light);
      }
    }
  }

  // 快速选项
  .quick-options {
    @extend .axiom-base-sheet__quick-options;
    
    .quick-option {
      @extend .axiom-base-sheet__quick-option;
      padding: var(--axiom-button-padding-y-sm, 8px) var(--axiom-button-padding-x-md, 16px);
      border-radius: var(--axiom-button-border-radius-pill, 20px);
    }
  }

  // 预设值区域
  .preset-values {
    .preset-title {
      margin-bottom: var(--axiom-spacing-sm, 12px);
      font-size: var(--axiom-font-size-sm, 14px);
      font-weight: var(--axiom-font-weight-semibold, 600);
      color: var(--text-color);
    }
    
    .preset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--axiom-number-range-sheet-preset-item-min-width, 80px), 1fr));
      gap: var(--axiom-spacing-xs, 8px);
      
      .preset-item {
        padding: var(--axiom-spacing-sm, 12px) var(--axiom-spacing-xs, 8px);
        text-align: center;
        border: 1px solid var(--border-color);
        background: var(--bg-color-tertiary);
        border-radius: var(--axiom-border-radius-base, 8px);
        cursor: pointer;
        transition: all var(--axiom-transition-duration-base) ease;
        
        &:hover {
          border-color: var(--primary-color);
          background: rgba(var(--primary-color-rgb), 0.05);
        }
        
        &.active {
          border-color: var(--primary-color);
          background: var(--primary-color);
          color: var(--text-color-on-primary);
        }
        
        .preset-label {
          font-size: var(--axiom-font-size-xs, 12px);
          font-weight: var(--axiom-font-weight-medium, 500);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  // 页脚
  .footer {
    @extend .axiom-base-sheet__footer;

    .actions {
      @extend .axiom-base-sheet__footer-actions;
    }
  }
}

// 响应式适配
@media (max-width: 480px) {
  .axiom-number-range-sheet {
    .range-inputs {
      flex-direction: column;
      gap: 12px;
      
      .range-separator {
        order: -1;
        margin-top: 0;
        font-size: 13px;
      }
    }
    
    .slider-section {
      .range-slider {
        padding: 0 10px;
      }
      
      .slider-labels {
        padding: 0 10px;
      }
    }
    
    .preset-values {
      .preset-grid {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
      }
    }
  }
}

// 主题特殊适配
.theme-cyberpunk .axiom-number-range-sheet,
.theme-neon .axiom-number-range-sheet {
  .slider-section {
    :deep(.el-slider) {
      .el-slider__button {
        box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5);
        
        &:hover {
          box-shadow: 
            0 0 0 4px rgba(var(--primary-color-rgb), 0.2),
            0 0 15px rgba(var(--primary-color-rgb), 0.6);
        }
      }
    }
  }
  
  .preset-values .preset-grid .preset-item.active {
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.4);
  }
} 